<template>
  <div class="container">
    <div class="header">
      <div class="goBack" style="position: absolute;left: 0.3rem;font-size:0.18rem; width: 0.3rem;height:0.3rem"
           @click="goBack">&lt;
      </div>
      <b class="iconfont icon-triangle-l"></b>
      <span>影片详情</span>
    </div>
    <main>
      <div class="main-header">
        <div class="img-box">
          <div class="pic">
            <img :src="replaceSrc(movieMessage.movie.img)" alt="">
          </div>
          <div class="pic-right">
            <h3>{{movieMessage.movie.nm}}</h3>
            <span v-if="movieMessage.movie.guideToWish===true">{{movieMessage.movie.wish}}人想看</span>
            <span v-else>{{movieMessage.movie.watched}}人已观看</span>
            <p>{{movieMessage.movie.cat}}</p>
            <p>{{movieMessage.movie.src}}/ {{movieMessage.movie.episodeDur}}分钟</p>
            <p>{{movieMessage.movie.pubDesc}}</p>
          </div>
        </div>
        <div class="like">
          <span>
            <b class="iconfont icon-xinaixin-fuben1"></b>
              <span>想看</span>
          </span>
          <span>
            <b class="iconfont icon-wujiaoxing-"></b>
            <span>评分</span>
          </span>
        </div>
      </div>
      <div class="mian-body">
        <div class="text-box">
          <p id="brief-introduction-content" class="" style="overflow: scroll;height:0.7rem">
            {{movieMessage.movie.dra}}</p>
        </div>
        <div class="performer">
          <h3>演职人员</h3>
          <ul class='content'>
            <li class="doct" v-for="ac in actors[0]" :key="ac.avatar">
              <img :src="replaceSrc(ac.avatar)" alt="">
              <span class="doc">{{ac.cnm}}</span>
              <span>{{ac.desc}}</span>
            </li>
            <li class="doct" v-for="ac in actors[1]" :key="ac.id">
              <img :src="replaceSrc(ac.avatar)" alt="">
              <span class="doc">{{ac.cnm}}</span>
              <span v-if="ac.roles != ''">{{ac.roles}}</span>
              <span v-else>演员</span>
            </li>
            <li class="doct" v-for="ac in actors[2]" :key="ac.id">
              <img :src="replaceSrc(ac.avatar)" alt="">
              <span class="doc">{{ac.cnm}}</span>
              <span v-if="ac.roles != ''">{{ac.roles}}</span>
              <span v-else>演员</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="photos">
        <div class="title">
          <div class="fl">
            <span>视频和剧照</span>
            <span>全部{{moviePhotos.size}}张</span>
          </div>
          <ul class="banner">
            <li v-for="photo in moviePhotos.photos" :key="photo.id">
              <img class="img noneBg" :src="replaceSrc(photo.tlink)">
            </li>
          </ul>
        </div>
        <div class="photos-list">
          <ul>
            <li class="left-margin">
            </li>
          </ul>
        </div>
      </div>
      <section class="discussion">
        <header>
          <span class="title">观众评论</span>
        </header>
        <div class="comments">
          <article class="no-padding-top" v-for="com in comments.cmts" :key="com.userId">
            <div>
              <img class="img noneBg avatar" :src="com.avatarurl">
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">{{com.nickName}}</span>
                    <img class="img noneBg level-icon" src=""></div>
                  <div class="commentstar">
                    <div class="star-wrap">
                      <img class="img noneBg star-img" alt="" src="">
                      <span class="star-score">{{com.score}}</span>
                      <span class="star-word">分</span>
                    </div>
                  </div>
                </div>
                <div class="title-appove">
                  <div class="hierarchy">
                    <a class="link"><span class="approve-word">{{com.approve}}</span></a></div>
                </div>
              </div>
              <div class="middle"><a>
                <span class="comment-content">{{com.content}}</span></a>
              </div>
            </div>
          </article>
        </div>
        <div class="separator-line"></div>
        <footer><a class="link goto-all-comments"><span>打开App，查看全部154个短评</span>
          <img
            class="img noneBg arrow-right-red" src=""></a></footer>
      </section>
    </main>
  </div>
</template>

<script>
  // import {mapState, mapActions} from 'vuex'

  export default {
    name: "MovieDetails",
    data() {
      return {
        actors: {},
        moviePhotos: {},
        comments: {},
        movieMessage: {},
      }
    },
    activated() {//获取数据
      this.actors = JSON.parse(localStorage.getItem('actors'))
      this.moviePhotos = JSON.parse(localStorage.getItem('moviePhotos'))
      this.comments = JSON.parse(localStorage.getItem('comments'))
      this.movieMessage = JSON.parse(localStorage.getItem('movieMessage'))
    },

    computed: {},
    methods: {
      replaceSrc(src) {
        src = src.replace('/w.h', '')
        return src
      },
      goBack() {
        window.history.back();  //返回上一页
      }

    }
  }
</script>

<style scoped>

  html {
    font-size: 100px;
  }

  body {
    background-color: #f6f6f6;

  }

  .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.45rem;
    font-size: 0.15rem;
    background-color: #de403d;
    color: #fff;
  }

  .header b {
    position: absolute;
    left: 0.17rem;
  }

  /* 主体内容头部 */
  .main-header {
    height: 2.2rem;
    background-color: #567891;
    padding: 0.13rem 0.15rem;
  }

  .main-header .img-box {
    display: flex;
    height: 1.5rem;
    margin-bottom: 0.15rem;
  }

  .main-header .img-box .pic img {
    width: 1.1rem;
    height: 1.5rem;
  }

  .pic-right {
    display: flex;
    flex-direction: column;
    margin-left: 0.17rem;
  }

  .pic-right h3 {
    font-size: 0.16rem;
    color: #fff;
    padding: 0.1rem 0;
  }

  .pic-right span {
    display: inline-block;
    font-size: 0.16rem;
    color: #e1c32f;
    padding: 0.075rem 0;
    margin-bottom: 0.1rem;
  }

  .pic-right p {
    font-size: 0.12rem;
    color: #a9bccb;
  }

  .main-header .like {
    font-size: 0.12rem;
    color: #fff;
  }

  .main-header .like > span {
    display: inline-block;
    width: 1.68rem;
    height: 0.3rem;
    border: 1px solid #96b3c5;
    line-height: 0.3rem;
    text-align: center;
  }

  /* 主体内容主体 */
  .mian-body {
    padding: 0.13rem 0.15rem;
  }

  .text-box {
    height: 0.95rem;
    background-color: #fff;
  }

  .mian-body p {
    font-size: 0.15rem;
  }

  .mian-body .performer {
    height: 1.8rem;
    background-color: #fff;
  }

  .mian-body .performer .content {
    display: flex;
    overflow-x: scroll;
  }

  .mian-body .performer .doct {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0.08rem;
  }

  .doct img {
    width: 0.8rem;
    height: 1.12rem;
  }

  .doct .doc {
    display: inline-block;
    font-size: 0.12rem;
  }

  .doct span:last-child {
    display: inline-block;
    font-size: 0.12rem;
    color: #ccc;
  }

  .mian-body .performer h3 {
    font-size: 0.14rem;
  }

  .photos {
    margin-top: 0.36rem;
  }

  .photos .title {
    font-size: 0.15rem;

  }

  .photos .title .fl > span {
    float: left;
  }

  .photos .title .fl > span:last-child {
    float: right;
    margin: 0 0.2rem 0 0;
  }

  .photos .title .fl:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }


  .photos .title span {
    margin-left: 0.2rem;

  }

  .photos .title .go-to-all {
    opacity: 0.6;
    font-size: 0.12rem;
  }


  .photos .title .banner {
    display: flex;
    overflow-x: scroll;
    padding-top: 0.2rem;
  }

  .photos .title .banner li {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-left: 0.15rem;
  }

  .photos .title .banner li img {
    width: 100%;
    height: 100%;
  }

  .photos .photos-list {
    margin-top: 0.11rem;
  }

  .photos .photos-list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
  }

  .photos .photos-list ul li {
    flex-shrink: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .photos .photos-list ul li img {
    width: 1.4rem;
    height: 0.93rem;
  }

  .photos .photos-list ul li.left-margin {
    margin-left: 0.16rem;
  }

  /* discussion */
  .discussion {
    background-color: #fff;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    flex: 1;
    /*overflow-y: scroll;*/
    margin-top: -0.12rem;
    position: relative;
  }

  .discussion > header {
    display: flex;
    justify-content: space-between;
    padding: 0.13rem 0.16rem 0.14rem;
  }

  .discussion > header .title {
    font-size: 0.15rem;
    color: #333;
  }

  .discussion > header button {
    background-color: #f03d37;
    box-shadow: 0 0.02rem 0.02rem 0 rgba(255, 211, 211, 0.6);
    border-radius: 0.125rem;
    font-size: 0.11rem;
    color: #fff;
    width: 0.32rem;
    height: 0.125rem;
  }

  .discussion .star-score {
    font-size: 0.12rem;
    color: #faaf00;

    display: inline-block;
  }

  .discussion .star-word {
    font-size: 0.12rem;
    color: #faaf00;

    display: inline-block;
  }

  .discussion > .comments .separator-line {
    margin-left: 0.6rem;
  }

  .discussion > .comments > article {
    padding: 0.15rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .discussion > .comments > article.no-padding-top {
    padding-top: 0;
  }

  .discussion > .comments > article.no-padding-bottom {
    padding-bottom: 0;
  }

  .discussion > .comments > article .avatar {
    height: 0.32rem;
    width: 0.32rem;
    border-radius: 0.17rem;
  }

  .discussion > .comments > article > .right {
    margin-left: 0.11rem;
    flex-grow: 1;
  }

  .discussion > .comments > article > .right > .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .discussion > .comments > article > .right > .top .title-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .discussion > .comments > article > .right > .top .hierarchy {
    z-index: 9;
  }

  .discussion > .comments > article > .right > .top .title-appove {
    border-radius: 0.13rem;
    text-align: center;
    height: 0.26rem;
    line-height: 0.26rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 0.1rem;
  }

  .discussion > .comments > article > .right > .top .title-appove:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 0.52rem;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    border: 1px solid #ccc;
    border-radius: 0.26rem;
  }

  .discussion > .comments > article > .right > .top .title-appove .approve-word {
    font-weight: 400;
    font-size: 0.12rem;
    color: #999;

    margin-left: 0.11rem;
  }

  .discussion > .comments > article > .right > .top .title-appove .thumb-up {
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block;
    vertical-align: middle;
  }

  .discussion > .comments > article > .right > .top .name-box {
    display: flex;
    align-items: center;
  }

  .discussion > .comments > article > .right > .top .name-box .name {
    font-size: 0.12rem;
    color: #333;
  }

  .discussion > .comments > article > .right > .top .name-box .level-icon {
    width: 0.31rem;
    height: 0.15rem;
    margin-left: 0.06rem;
  }

  .discussion > .comments > article > .right > .top .grade-score {
    font-size: 0.11rem;
    color: #999;
  }

  .discussion > .comments > article > .right > .top .right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .discussion > .comments > article > .right > .top .right button {
    height: 0.2rem;
    width: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .discussion > .comments > article > .right > .top .right button span {
    display: inline-block;
    height: 0.03rem;
    width: 0.03rem;
    background-color: rgba(51, 51, 51, 0.4);
    border-radius: 0.03rem;
    margin: 0 0.01rem;
  }

  .discussion > .comments > article > .right > .middle {
    margin-top: 0.05rem;
  }

  .discussion > .comments > article > .right > .middle .comment-content {
    font-size: 0.15rem;
    color: #333;
    line-height: 0.21rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }

  .discussion > .comments > article > .right > .bottom {
    margin-top: 0.1rem;
    font-size: 0.12rem;
    color: #666;
  }

  .discussion > .comments > article > .right > .bottom .reply {
    display: inline-block;
    background: #eef1f6;
    border-radius: 0.11rem;
    text-align: center;
    font-size: 0.12rem;
    color: #5a7cab;
    padding: 0.02rem 0.06rem;
    margin-left: 0.08rem;
  }

  .discussion > .comments > article > .right > .bottom .reply span {
    margin-left: 0.04rem;
  }

  .discussion > .comments > article > .right > .bottom > .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .discussion > .comments > article > .right > .bottom > .right .praise-num {
    margin-left: 0.05rem;
  }

  .discussion > .comments > article > .right > .bottom > .right .goto-comments {
    margin-left: 0.1rem;
    width: 0.55rem;
    height: 0.28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
  }

  .discussion
  > .comments
  > article
  > .right
  > .bottom
  > .right
  .goto-comments
  .comment-icon {
    margin-right: 0.04rem;
    height: 0.12rem;
    width: 0.12rem;
  }

  .discussion footer {
    height: 0.45rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .discussion footer .goto-all-comments {
    font-size: 0.15rem;
    color: #f03d37;
  }

  .discussion footer .goto-all-comments img {
    width: 0.06rem;
    height: 0.11rem;
    margin-left: 0.04rem;
  }

</style>